<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_class与style绑定</title>
  <style>
    .aClass {
      color: red;
    }
    .bClass {
      color: blue;
    }
    .cClass {
      font-size: 30px;
    }
  </style>
</head>
<body>

<!--
1. 理解
  在应用界面中, 某个(些)元素的样式是变化的
  class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class='xxx'
  xxx是字符串
  xxx是对象
  xxx是数组
3. style绑定
  :style="{ color: activeColor, fontSize: fontSize + 'px' }"
  其中activeColor/fontSize是data属性
-->

<div id="demo">
  <h2>1. class绑定: :class='xxx'</h2>
  <p class="cClass" :class="a">xxx是字符串</p>
  <p :class="{aClass: isA,bClass: isB}">xxx是对象</p>
  <p :class="['aClass','cClass']">xxx是数组</p>
  <h2>2. style绑定</h2>
  <p :style="{color: activeColor,fontSize: fontSize + 'px'}">:style="{ color: activeColor, fontSize: fontSize + 'px' }</p>
  <button @click="update">更新</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
      el: "#demo",
      data: {
        a: 'aClass',
        isA :true,//设置样式A生效
        isB: false,//设置样式B无效
        activeColor: 'red',
        fontSize: '20'
      },
      methods: {
        //this:表示Vue对象，所有的操作都是从Vue对象中取出属性并且赋值
        update(){
          this.a = "bClass";
          this.isA = false;
          this.isB =true;
          this.activeColor = "green";
          this.fontSize = 30
        }
      }
    })
</script>
</body>
</html>